<template>
    <div class="tab">
        <tab-search
            :search-val="searchVal"
            :change-val="changeVal"
            @input-change="inputChange"
        ></tab-search>
        <tab-nav
            :nav-data="navData"
            :tab-index="tabIndex"
            @change-nav-item="changeNavItem"
        ></tab-nav>
        <tab-page
            :page-data="pageData"
        ></tab-page>
    </div>
</template>

<script>
import TabSearch from './TabSearch/index.vue'
import TabNav from './TabNAV/index.vue'
import TabPage from './TabPage/index.vue'

export default {
    name: 'tab',
    components: {
        TabSearch,
        TabNav,
        TabPage
    },
    props: ['tabData'],
    data() {
        return {
            searchVal: this.tabData.data[this.tabData.intialIndex].title,
            tabIndex: this.tabData.intialIndex,
            changeVal:''
      }  
    },
    computed: {
        navData() {
            const data = this.tabData.data;
            return data.map((item) => {
                return {
                    id: item.id,
                    itemTitle: item.itemTitle
                }
            });
        },
        pageData() {
            return this.tabData.data[this.tabIndex];
        }
    },
    methods: {
        changeNavItem(index) {
            this.tabIndex = index;
            this.changeVal = this.tabData.data[index].title;
        },
        inputChange(newValue) {
            const data = this.tabData.data;
            const temp = data.findIndex((item) => {
                if (item.title.includes(newValue) || item.content.includes(newValue)) {
                    return true;
                }
            })
            this.tabIndex = (temp != -1) ? temp : 0                       
        }
    }
}
</script>

<style scoped>
.tab {
    width: 400px;
    height: 500px;
    border: 1px solid #454545;
    margin: 20px auto;
    text-align: center;
}
</style>
